<form nz-form class="dict-type-list-search-form">
    <div nz-row>
        <div nz-col nzXl="24" nzXXl="7">
            <nz-form-item class="ant-form-item">
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="showFormDialog()" nzSize="small">
                        <span nz-icon nzType="plus" nzTheme="outline"></span>
                        创建字典类型
                    </button>
                    <button nz-button nzType="primary" nzDanger nzSize="small" [disabled]="setOfCheckedId.size == 0"
                            (click)="showDeleteConfirm()">
                        <span nz-icon nzType="delete" nzTheme="outline"></span>
                        批量删除
                    </button>

                    <button nz-button nzSize="small" (click)="visibleTrash = true;">
                        <span nz-icon nzType="rest" nzTheme="outline"></span>
                        回收站
                    </button>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col nzXl="7" nzXXl="5">
            <nz-form-item class="ant-form-item">
                <nz-form-label [nzFor]="'dictTypeCode'">字典类型编码</nz-form-label>
                <nz-form-control>
                    <input nz-input [attr.id]="'dictTypeCode'" [(ngModel)]="_dictTypeCode"
                           [ngModelOptions]="{standalone: true}" nzSize="small"/>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col nzXl="7" nzXXl="5">
            <nz-form-item class="ant-form-item">
                <nz-form-label [nzFor]="'dictTypeName'">字典类型名称</nz-form-label>
                <nz-form-control>
                    <input nz-input [attr.id]="'dictTypeName'" [(ngModel)]="_dictTypeName"
                           [ngModelOptions]="{standalone: true}" nzSize="small"/>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col nzXl="6" nzXXl="4">
            <nz-form-item class="ant-form-item">
                <nz-form-label [nzFor]="'dictTypeName'">是否已启用</nz-form-label>
                <nz-form-control>
                    <nz-radio-group [(ngModel)]="selectedEnabled" [ngModelOptions]="{standalone: true}"
                                    nzSize="small" nzButtonStyle="solid" (ngModelChange)="search()"
                    >
                        <label nz-radio-button nzValue="true">已启用</label>
                        <label nz-radio-button nzValue="false">已禁用</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col nzXl="4" nzXXl="3">
            <nz-form-item class="ant-form-item">
                <nz-form-control>
                    <button nz-button [nzType]="'primary'" nzSize="small" (click)="search()">
                        <span nz-icon nzType="search" nzTheme="outline"></span>查询
                    </button>
                    <button nz-button nzSize="small" (click)="reset()">
                        <span nz-icon nzType="reload" nzTheme="outline"></span>重置
                    </button>
                </nz-form-control>
            </nz-form-item>
        </div>

    </div>
</form>

<div class="search-result-list">
    <nz-table
        nzShowSizeChanger
        [nzData]="listOfDictType"
        [nzFrontPagination]="false"
        [nzLoading]="_loading"
        [nzTotal]="totalRecords"
        [nzPageSize]="pageSize"
        nzSize="small"
        (nzQueryParams)="onQueryParamsChange($event)"
    >
        <thead>
        <tr>
            @for (col of cols; track col.field) {
                @if (col.field == 'id') {
                    <th [nzChecked]="checked"
                        (nzCheckedChange)="onAllChecked($event)"
                        [nzIndeterminate]="indeterminate"
                    >
                    </th>
                } @else {
                    @if (col.sortable == true) {
                        <th [nzColumnKey]="col.field" [nzSortFn]="col.sortable == true"
                            style="font-weight: bold;">{{ col.header }}
                        </th>
                    } @else {
                        <th style="font-weight: bold;">{{ col.header }}</th>
                    }
                }
            }
        </tr>
        </thead>
        <tbody>
            @for (data of listOfDictType; track data.id) {
                <tr>
                    <td [nzChecked]="setOfCheckedId.has(data.id)"
                        (nzCheckedChange)="onItemChecked(data.id, $event)"
                    >
                    </td>
                    <td>{{ data.dictTypeCode }}</td>
                    <td>{{ data.dictTypeName }}</td>
                    <td>
                        <nz-switch [(ngModel)]="data.enabled" nzSize="small"
                                   nz-tooltip [nzTooltipTitle]="data.enabled ? '已启用' : '已禁用'"
                                   nzTooltipPlacement="top"
                                   [nzControl]="true" (click)="statusChange(data)" [nzLoading]="data.switchLoading"
                        >
                        </nz-switch>
                    </td>
                    <td>{{ data.description }}</td>
                    <td>{{ data.createdBy }}</td>
                    <td>{{ data.createdTime }}</td>
                    <td>{{ data.lastUpdatedBy }}</td>
                    <td>{{ data.lastUpdatedTime }}</td>
                    <td>
                        <button nz-button [nzType]="'primary'" nzSize="small" nzShape="circle"
                                nz-tooltip nzTooltipTitle="编辑" nzTooltipPlacement="top"
                                (click)="showFormDialog(data.id)"
                        >
                            <span nz-icon nzType="edit" nzTheme="outline"></span>
                        </button>

                        <button nz-button [nzType]="'primary'" nzSize="small" nzShape="circle" nzDanger
                                nz-tooltip nzTooltipTitle="删除" nzTooltipPlacement="top"
                                nz-popconfirm
                                [nzPopconfirmTitle]="'你确定要删除字典类型【' + data.dictTypeName + '】吗？'"
                                (click)="dictTypeIdToDelete = data.id"
                                [nzBeforeConfirm]="beforeConfirm"
                                nzPopconfirmPlacement="top"
                                [nzCancelButtonProps]="{nzDisabled: cancelButtonDisabled}"
                        >
                            <span nz-icon nzType="delete" nzTheme="outline"></span>
                        </button>

                        <button nz-button [nzType]="'primary'" nzSize="small" nzShape="circle"
                                nz-tooltip nzTooltipTitle="字典值管理" nzTooltipPlacement="top"
                                (click)="showDictItemListDialog(data)" *appAuthority="'sys-dict-item:list'"
                        >
                            <span nz-icon nzType="appstore" nzTheme="outline"></span>
                        </button>

                        <button nz-button [nzType]="'primary'" nzSize="small" nzShape="circle"
                                nz-tooltip nzTooltipTitle="操作日志" nzTooltipPlacement="top"
                                (click)="showOperationLogDialog(data)"
                        >
                            <span nz-icon nzType="eye" nzTheme="outline"></span>
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </nz-table>
</div>

<!-- 编辑字典类型 弹窗 -->
@if (formDialogDisplay) {
    <app-dict-type-edit-form [(formDialogDisplay)]="formDialogDisplay"
                             [formTitle]="formTitle"
                             [dictTypeId]="dictTypeId"
                             (triggerDictTypeListRefreshEmitter)="search()">
    </app-dict-type-edit-form>
}

<!-- 字典选项管理 弹窗 -->
@if (dictItemListDialogDisplay && dictTypeId) {
    <app-dict-item-list [(visibleSidebar)]="dictItemListDialogDisplay"
                        [dictTypeId]="dictTypeId"
                        [dictTypeName]="selectedDictTypeName"
    >
    </app-dict-item-list>
}

<!-- 操作日志 -->
@if (operationLogDialogDisplay && dictTypeId) {
    <app-operation-log [(operationLogDialogDisplay)]="operationLogDialogDisplay"
                       [titlePrefix]="'字典类型【' + dictTypeName + '】'"
                       type="DICT_TYPE"
                       [bizId]="dictTypeId"
    >
    </app-operation-log>
}

@if (visibleTrash) {
    <app-deleted-dict-type-list [(visibleTrash)]="visibleTrash"></app-deleted-dict-type-list>
}
